<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2</title>
    <!-- 如果link在上面，下方的div要渲染，则需要等待css加载完成才会渲染。但是在扫描构建domTree的时候，从上到下下，不需要等待。 -->
    <!-- <link rel="stylesheet" href="./index.css"> -->
</head>
<body>
    <div class="red">red</div>
    <div>111</div>
    <div>222</div>
    <div>333</div>
    <!-- link放div下面，此时div会先渲染一次，后面css加载完成后，会将div重新再绘制一次(paint) -->
    <link rel="stylesheet" href="./index.css?delay=1000">
    <div class="green">green</div>

    <!-- <link rel="stylesheet" href="./gray.css?delay=3000">
    <div class="gray">gray</div> -->
    <!-- 样式放到底部,可能会导致重绘效果 -->
    <!-- 当html 渲染时 会先扫描js和css 渲染是从上到下的，解析过程是：边解析边渲染 -->

    <!-- 总结：css不阻塞dom解析，但会阻塞dom渲染 -->
    <!-- 1、css不会阻塞html的解析。即，在构建domTree的时候不需要等待css加载完成。 -->
    <!-- 2、渲染dom时 要等待样式加载完毕。即：渲染的时候，要等待css加载完成 -->

    

</body>
</html>
